<template>
    <!-- 搜索 -->
    <el-card shadow="never" style="margin-bottom: 14px;" :body-style="{ paddingBottom: '2px' }">
        <el-form  :inline="true">
            <el-form-item label="状态：">
                <el-cascader 
                :props="{
                   
                   checkStrictly: true,
                     label: 'name',
                     value: '_id',
       
       
                }" 
                
                clearable />
            </el-form-item>
            <el-form-item label="身份昵称：" >
                <el-input style="width: 250px;" placeholder="请输入身份昵称">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button        type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
   




    <!-- 表格 -->
    <el-card shadow="never">
        <div class="hhd">
        <el-button type="primary" @click="openDialog">添加角色</el-button>
    </div>


        <BaseTable :data="tableData.rows" :total="tableData.total" v-model="pageData"
         :columns="columns">
          <template #state="{ row }">
           <el-switch v-model="row.state" inline-prompt
           active-text="开启"
           inactive-text="关闭"
           :active-value="1"
           :inactive-value="0">

           </el-switch>
          </template>

            <template #action="{ row }">
                <el-button @click="openDialog(row)">编辑</el-button>
                <el-button type="primary" 
                plain
                
                >删除</el-button>
            </template>
        </BaseTable>

    </el-card>
    <RolesDialog ref="rolesRef" @getRolesData=" getRolesData "  />
</template>

<script setup lang="ts">
import { onMounted, reactive, useTemplateRef, watch } from 'vue';
import RolesDialog from './RolesDialog.vue';
import { ref } from 'vue';
import api from '@/api';
import { RoleItem } from '@/api/modules/roles';
const rolesRef = useTemplateRef<InstanceType<typeof RolesDialog>>('rolesRef');


const columns = [
    { label: '角色名称', prop: 'name' },
    { label: '角色状态', prop: 'state' },
    { label: '操作', prop: 'action' },
]

let pageData = ref({
    pageSize: 10,
    currentPage: 1
})
let tableData = reactive({
    rows: [],
    total: 0
})





onMounted(() => {
    getRolesData();
})

watch(pageData, () => {
    getRolesData();
}, { deep: true })


const openDialog = (row?: RoleItem) => {
 
        rolesRef.value!.onOpenDialog(row); 
    

}


const getRolesData = () => {
    api.roles.search({
        ...pageData.value
    }).then(res => {
        if (res.code == 200) {
            tableData.rows = res.data.rows;
            tableData.total = res.data.total;
        }
    })
}





// //删除前确认
// let deletConfirm=()=>{

// }


// let handleDelete=()=>{

// }












</script>

<style scoped>
.hhd{
    margin-bottom: 14px;
}
</style>
